{% extends "baseUser.html" %}
{% block head %}
	{{ super() }}

	<link href="/static/css/circleview.css" type="text/css" rel="stylesheet">
	
{% endblock %}
{% block userData %}
	<div class="container">
		<div class="page-header">		
		
			<div class="col-lg-6 col-sm-6 col-xs-6 col-xxs-12">
				<div id="objectBox" >
					<div class="corner-stamp" id="add_box">Sincronizar<br/>contactos</div>
				</div>
				
				<div id="circleBox" >
					<div class="corner-stamp" id="show_all">Mostrar todos<br/>los contactos</div>			
				</div>
			</div>
		
		</div>

		<div class="row">
			<div class="mainCircleContainer" id="1" style="top:200px; left:50px;">
			<!-- <div id="dragWindow"></div>-->
				<div id="s1" class="smallCircle">
					<label id="circleLabel">Gimnasio</label>
				</div>				
				<div id="b1" class="bigCircle">
				</div>
			</div>
		</div>

		<div class="row">
			<div class="mainCircleContainer" id="2" style="top:200px; left:250px;">
				<div id="s2" class="smallCircle">
					<label id="circleLabel">Facultad</label>
				</div>				
				<div id="b2" class="bigCircle">
				</div>
			</div>
		</div>

		<div class="row">
			<div class="mainCircleContainer" id="3" style="top:200px; left:450px;">
				<div id="s3" class="smallCircle">
					<label id="circleLabel">Tenis</label>
				</div>				
				<div id="b3" class="bigCircle">
				</div>
			</div>
		</div>
	</div>
	
       
{% endblock %}
{% block js_footer %}
	{{ super() }}

	<script src="/static/circleView/tween/TimelineLite.js"></script>
	<script src="/static/circleView/tween/EasePack.js"></script>
	<script src="/static/circleView/tween/TimelineMax.js"></script>
	<script src="/static/circleView/tween/TweenMax.js"></script>

	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	
	<script src="/static/circleView/masonry/jquery.masonry.min.js"></script>		
	<script src="/static/circleView/masonry/jquery.masonry.corner.stamp.js"></script>		
	<script src="/static/circleView/circleview/CircleView.js"></script>
	
	<script type="text/javascript">
		objectDatabase=[
			{%- for contact in contacts %}
				{title:"{{contact.name}}",image:"{{contact.image}}",url:"{{contact.url}}",extid:"{{contact.external_id}}",authprovid:"{{contact.auth_provider_id}}" } {{ ',' if not loop.last }}
			{%- endfor %}
			];
			//config -
			//simulate this db to be in your server--------
			/*
			objectDatabase=[{title:"Winner",image:"",url:""},
			             {title:"Jose",image:"https://lh6.googleusercontent.com/-gFSf20CDQos/UKyfK_76ZeI/AAAAAAAAAMc/yTWayUoqA1k/s128/sachin.jpg",url:""},
			             {title:"Batman",image:"https://lh5.googleusercontent.com/-4TaI4pvaUzo/UMX_RLSLFZI/AAAAAAAAAc4/2OADM-Izh8E/s800/bat.png",url:""},
			             {title:"Android in Rain",image:"https://lh3.googleusercontent.com/-CFI2PBn3xaE/UMX_RUigPTI/AAAAAAAAAc8/VApDqnIDvEQ/s800/android_bot.png",url:""},
			             {title:"Prueba 2",image:"https://lh6.googleusercontent.com/-SkmrjH6gxjQ/UMX_UEpoWoI/AAAAAAAAAdQ/VPrPpyxfVLE/s800/db.png",url:""},
			             {title:"Otra",image:"https://lh3.googleusercontent.com/-jr-SH35yoRw/UL4ANu3ifYI/AAAAAAAAAaA/1-VHYf-Dvgo/s800/ch.png",url:"http://www.google.com"}];
			*/
			//------------------------------------------------	
	</script>
	
	
    <script type="text/javascript">
		{%- for friend in friends %}
			var imgDiv{{friend.external_id}} = buildHtmlImageToAdd("{{friend.image_url}}","{{friend.external_id}}","{{friend.auth_provider_id}}");
			var div{{friend.external_id}} = $('<div>'+imgDiv{{friend.external_id}}+'</div>');
			var listIds{{friend.external_id}} = "{{friend.listsIds}}".split(',');
			var len = listIds{{friend.external_id}}.length
			for (var i=0; i<len; ++i)
			{
				addCircle(div{{friend.external_id}},listIds{{friend.external_id}}[i],false);
			}
		{%- endfor %}

		//config -
		//simulate this to add friends to circles from db --------
		/*
		var f1 = buildHtmlImageToAdd('https://lh5.googleusercontent.com/-4TaI4pvaUzo/UMX_RLSLFZI/AAAAAAAAAc4/2OADM-Izh8E/s800/bat.png',123,1);
		var div1 = $('<div>'+f1+'</div>');
		addCircle(div1,1,false);
		addCircle(div1,2,false);
		addCircle(div1,3,false);
		var f2 = buildHtmlImageToAdd('https://lh6.googleusercontent.com/-gFSf20CDQos/UKyfK_76ZeI/AAAAAAAAAMc/yTWayUoqA1k/s128/sachin.jpg',456,1);
		var div2 = $('<div>'+f2+'</div>');
		addCircle(div2,3,false);
		*/
	</script>

{% endblock %}